<template>
  <div class="home-page">
    <el-row :gutter="12" type="flex" class="home-card-list">
      <el-col :span="16" class="home-card-item-one">
        <calendarData />
        <el-row :gutter="12" type="flex">
          <el-col :span="10">
            <quickEntry />
          </el-col>
          <el-col :span="14">
            <dataBase :data-base="dataBase"/>
            <el-card class="data-services-enter">
              <p class="title">数据分析服务</p>
              <div class="enter-box">
                <div v-for="(item, i) in serviceData" :key="i" class="enter" @click="goTurn(item)">
                  <!-- <div class="enter-img"> -->
                  <img :src="item.img" alt="数据分析">
                  <!-- </div> -->
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8" class="home-card-item-two">
        <el-card class="user-info-card">
          <div class="user-info-container">
            <span class="logout" title="退出登录" @click="toLogout"/>
            <div class="avatar" @click="toAccountNum">
              <img :src="userData.avatar || userAvatar" alt="avatar" >
            </div>
            <div style="min-width:0;">
              <div class="user-name">
                <span>{{ userData.greetings }}好，{{ userData.userName }}！</span>
              </div>
              <div >
                <div class="user-info" style="margin-bottom: 12px">
                  <span>工号：</span>{{ userData.jobNumber || '--' }}
                </div>
                <div class="home-page-department">
                  <div class="departmentName">部门：</div>
                  <el-tooltip placement="top">
                    <div slot="content" style="max-width:200px;">{{ userData._departmentName || '--' }}</div>
                    <div class="content">{{ userData._departmentName || '--' }}</div>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </el-card>
        <orderProgress :order-fill-rate="orderFillRate" />
        <imprintLastLogin :lasted-login-user="lastedLoginUser"/>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getDataInfo } from '@/api/home';
import userAvatar from '@/assets/user-avatar.png';
import wx from '@/assets/home/wx.png';
import douyin from '@/assets/home/douyin.png';
import hot from '@/assets/home/hot.png';
import calendarData from './module/calendarData';
import dataBoard from './module/dataBoard';
import ListTab from './module/header';
import quickEntry from './module/quickEntry';
import pageDataShow from './module/pageDataShow';
import dataBase from './module/dataBase';
import orderProgress from './module/orderProgress';
import imprintLastLogin from './module/imprintLastLogin';
import { standardFormat } from '@/filters/date';
import { mapState } from 'vuex';
export default {
  filters: { standardFormat },
  components: { dataBoard, ListTab, pageDataShow, quickEntry, calendarData, dataBase, orderProgress, imprintLastLogin },
  data() {
    return {
      userAvatar,
      userData: {},
      dataBase: {},
      orderFillRate: [],
      lastedLoginUser: [],
      serviceData: [
        { name: '实时热榜', type: 1, img: hot, explain: '榜单排行' },
        { name: '抖音数据', url: 'https://video.feibo.cn/', type: 2, img: douyin, explain: '链路分析' },
        { name: '公众号数据', url: 'https://data.feibo.cn/', type: 3, img: wx, explain: '数据追踪' }
      ],
      color: [
        { type: 'orderRate', color: '#FD8546' },
        { type: 'projectRate', color: '#406EFF' },
        { type: 'verificationRate', color: '#31CC9C' }
      ],
      authProgress: [
        { type: 'orderRate', auth: 'crm:orderList:read' },
        { type: 'projectRate', auth: 'crm:project:read' },
        { type: 'verificationRate', auth: 'crm:finance:read' }
      ],
      name: ''
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  created() {
    this.loadMore();
  },
  methods: {
    loadMore() {
      this.getHomeInfo();
      this.name = this.isBrand() ? 'userUpdate' : 'editUser';
    },
    getHomeInfo() {
      getDataInfo().then(res => {
        this.userData = {
          greetings: res.data.greetings,
          ...this.userInfo
        };
        if (this.userData.deptName && this.userData.deptName.length) {
          this.userData._departmentName = this.userData.deptName.map(i => i.name).join('/');
        }
        this.dataBase = res.data.dataBase;
        res.data.orderFillRate.map(item => {
          if (item.type === 'verificationRate') {
            item.name = '待核销数量';
          } else {
            item.name = '待处理';
          }
          const typeColor = this.color.find(currentValue => item.type === currentValue.type);
          const authProgress = this.authProgress.find(currentValue => item.type === currentValue.type);
          item = Object.assign(item, typeColor, authProgress);
          return item;
        });
        this.orderFillRate = res.data.orderFillRate;
        this.lastedLoginUser = res.data.lastedLoginUser;
      }).catch(err => {
        console.error(err);
      });
    },
    goTurn(item) {
      if (item.type === 1) {
        this.$router.push({
          name: 'hotList'
        });
      } else {
        window.open(item.url);
      }
    },
    isBrand(data) {
      try {
        const authList = JSON.parse(this.userInfo.authList);
        const hasBarnd = authList.every(i => {
          return i.indexOf('brand:') >= 0;
        });
        return hasBarnd;
      } catch (error) {
        return false;
      }
    },
    toAccountNum() {
      this.$router.push({
        name: 'userDetail',
        params: { userId: this.userInfo.id }
      });
    },
    toLogout() {
      this.$store.dispatch('LogOut').then(() => {
        // location.reload(); // 为了重新实例化vue-router对象 避免bug
        location.href = '/';
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.home-page {
  padding: 16px;
  // background: #1B2657;
  .home-card-item-one {
    .data-services-enter {
      min-width: 314px;
      border-radius: 4px;
      box-shadow: 2px 2px 8px 0px #DDE1EA;
      height: 148px;
      &::v-deep {
        .el-card__body {
          padding: 16px 20px 8px;
        }
      }
      .title {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        margin: 0;
      }
      .enter-box {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 18px;
        cursor: pointer;
        // .enter-img {
        //   margin-right: 12px;
        // }
        .enter {
          margin-right: 12px;
          &:last-of-type {
            margin-right: 0;
          }
          img {
            width: 100%;
            max-width: 120px;
          }
        }
      }
    }
  }
  .home-card-item-two {
    .user-info-card {
      min-width: 314px;
      border-radius: 4px;
      margin-bottom: 12px;
      height: 128px;
      box-shadow: 2px 2px 8px 0px #DDE1EA;
    }
    .user-info-card {
      &::v-deep {
        .el-card__body {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: nowrap;
          padding: 17px 20px 16px;
          .avatar {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            margin-right: 17px;
            background: #eee;
            cursor: pointer;
            flex-shrink: 0;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .user-name {
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

          }
          .user-info {
            font-size: 14px;
            font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
            font-weight: 400;
            color: #666666;
            margin: 0;
            span {
              font-family: PingFangSC-Regular, PingFang SC;
              color: #999999;
            }

          }
        }
      }
    }
  }
}
// @media screen and (min-width: 1600px) and (max-width: 1880px) {
//   .enter-img {
//     margin: 0 auto;
//     width: 85% !important;
//     height: 100%;
//   }
// }

// @media screen and (min-width: 1920px) {
//   .enter-img {
//     margin: 0 auto;
//     width: 80% !important;
//     height: 100%;
//   }
// }

.user-info-container {
  display: flex;
  width: 100%;
  align-items: center;
  position: relative;
  .logout {
    width: 16px;
    height: 16px;
    background: url('../../assets/home/logout.png') center no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 2px;
    &:active {
      background: url('../../assets/home/logout_active.png') center no-repeat;
      background-size: 100% 100%;
    }
    &:hover {
      background: url('../../assets/home/logout_active.png') center no-repeat;
      background-size: 100% 100%;
    }
  }
}
.home-page-department {
  display: flex;
    width: 100%;
  .departmentName {
    font-family: PingFangSC-Regular, PingFang SC;
    color: #999999;
    flex-shrink: 0;
    font-size: 14px;
  }
  .content {
    font-size: 14px;
    font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
    font-weight: 400;
    color: #666666;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
}

</style>
